import React, { useState, createContext, useContext, useMemo } from 'react';

const CountContext = createContext();

export default function Exaple() {
  const [count, setcount] = useState(0);
  const abc = 'abc'
  return(
    <div>
      <p>{count}</p>
      <button onClick={()=>{setcount(count+1)}}>add One</button>
      <CountContext.Provider value={abc}>
        <Inner/>
      </CountContext.Provider>
    </div>
  )
}

function Inner() {
    function changeStr(str) {
        console.log(111);
        return str+'ddd';  
    }
  // const str = changeStr(useContext(CountContext)) ;
  const cont = useContext(CountContext)
 const str = useMemo(()=>changeStr(cont),[cont])  
   return(
    <div>
      {str}
    </div>
  )
}